<template>
	<view class="back-school-apply">
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
		</tn-nav-bar>
		<!-- 顶部导航栏 -->
<!-- 		<view class="nav-bar">
			<view class="back-btn" @click="navigateBack">
				<uni-icons type="left" size="24" color="#ffffff"></uni-icons>
			</view>
			<view class="right-actions">
				<uni-icons type="ellipsis" size="24" color="#ffffff" class="action-icon"></uni-icons>
				<uni-icons type="eye" size="24" color="#ffffff" class="action-icon"></uni-icons>
			</view>
		</view> -->

		<!-- 头部标题区域 -->
		<view class="header">
			<text class="page-title">返校预约</text>
			<text class="page-desc">请提交您要返校的基本信息并耐心等待审核！</text>
		</view>

		<!-- 表单卡片 -->
		<view class="form-card">
			<!-- 姓名 -->
			<!-- <view class="form-item">
				<text class="item-label">姓名</text>
				<input class="item-input" placeholder="请输入姓名" v-model="formData.name" />
			</view> -->
			<view class="divider"></view>

			<!-- 性别（使用单选框） -->
			<!-- <view class="form-item">
				<text class="item-label">性别</text>
				<view class="gender-select">
					<radio-group v-model="formData.gender">
						<label class="radio-label">
							<radio value="male" /> 男
						</label>
						<label class="radio-label">
							<radio value="female" /> 女
						</label>
					</radio-group>
				</view>
			</view> -->
			<view class="divider"></view>

			<!-- 联系电话 -->
			<!-- <view class="form-item">
				<text class="item-label">联系电话 <text class="required">*</text></text>
				<input class="item-input" type="number" placeholder="请输入联系电话" v-model="formData.phone" />
			</view> -->
			<view class="divider"></view>

			<!-- 返校时间（点击选择） -->
			<view class="form-item" @click="showBackTimePicker = true">
				<text class="item-label">返校时间 <text class="required">*</text></text>
				<view class="date-container">
					<uni-icons type="calendar" size="16" color="#999" class="date-icon"></uni-icons>
					<input class="item-input date-input" placeholder="请选择返校时间" v-model="formData.backTime" readonly />
				</view>
			</view>
			<view class="divider"></view>

			<!-- 离校时间（点击选择） -->
			<view class="form-item" @click="showLeaveTimePicker = true">
				<text class="item-label">离校时间 <text class="required">*</text></text>
				<view class="date-container">
					<uni-icons type="calendar" size="16" color="#999" class="date-icon"></uni-icons>
					<input class="item-input date-input" placeholder="请选择离校时间" v-model="formData.leaveTime" readonly />
				</view>
			</view>
			<view class="divider"></view>

			<!-- 返校人数 -->
			<view class="form-item">
				<text class="item-label">返校人数 <text class="required">*</text></text>
				<input class="item-input" type="number" placeholder="请输入人数" v-model="formData.peopleCount" />
			</view>
			<view class="divider"></view>

			<!-- 返校事由（多行输入） -->
			<view class="form-item multi-line">
				<text class="item-label">返校事由 <text class="required">*</text></text>
				<textarea class="item-textarea" placeholder="请输入返校事由" v-model="formData.reason" rows="3"></textarea>
			</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submitForm">提交申请</button>

		<!-- 时间选择器 -->
		<uni-datepicker type="datetime" v-model="backTime" :show="showBackTimePicker" @confirm="onBackTimeConfirm"
			@cancel="showBackTimePicker = false"></uni-datepicker>

		<uni-datepicker type="datetime" v-model="leaveTime" :show="showLeaveTimePicker" @confirm="onLeaveTimeConfirm"
			@cancel="showLeaveTimePicker = false"></uni-datepicker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据（双向绑定的核心）
				formData: {
					name: '',
					gender: 'male',
					phone: '',
					backTime: '',
					leaveTime: '',
					peopleCount: '',
					reason: ''
				},
				showBackTimePicker: false,
				showLeaveTimePicker: false,
				backTime: '', // 补充时间选择器绑定的变量
				leaveTime: ''
			}
		},
		// 所有方法必须包裹在 methods 对象中
		methods: {
			// 提交表单
			submitForm() {
				console.log('表单数据：', this.formData)
				// 提交成功提示
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				// 重置表单
				this.formData = {
					name: '',
					gender: 'male',
					phone: '',
					backTime: '',
					leaveTime: '',
					peopleCount: '',
					reason: ''
				}
			},
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择返校时间
			onBackTimeConfirm(e) {
				this.formData.backTime = e
				this.showBackTimePicker = false
			},
			// 选择离校时间
			onLeaveTimeConfirm(e) {
				this.formData.leaveTime = e
				this.showLeaveTimePicker = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.back-school-apply {
	  background-color: #f5f7fa;
	  min-height: 100vh;
	  padding-top: 83rpx;
	}
	// 补充导航栏和头部样式（之前缺失）
	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #00825f;
	}

	.back-btn {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.right-actions {
		display: flex;
		align-items: center;
	}

	.action-icon {
		margin-left: 30rpx;
	}

	.header {
		background: linear-gradient(180deg, #00825f 0%, #007356 100%);
		padding: 40rpx 30rpx 60rpx;
	}

	.page-title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-desc {
		font-size: 28rpx;
		color: #ffffff;
		opacity: 0.9;
		display: block;
	}

	.form-card {
		background-color: #ffffff;
		margin: 0 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-top: -30rpx;
		padding: 0 30rpx;
	}

	// 表单项
	.form-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
	}

	// 标签
	.item-label {
		width: 200rpx;
		font-size: 30rpx;
		color: #333;
	}

	// 必填项标记
	.required {
		color: #ff3b30;
	}

	// 输入框
	.item-input {
		flex: 1;
		font-size: 30rpx;
		color: #666;
		padding: 6rpx 0;
		border: none;
		outline: none;
		background-color: transparent;
	}

	// 日期选择器容器
	.date-container {
		display: flex;
		align-items: center;
		flex: 1;
	}

	// 日期选择器图标
	.date-icon {
		margin-right: 10rpx;
		padding-top: 6rpx;
	}

	.date-input {
		padding-top: 0;
	}

	// 性别选择
	.gender-select {
		flex: 1;
		display: flex;
		gap: 30rpx;
		padding-top: 6rpx;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #666;
	}

	// 多行输入框
	.multi-line {
		align-items: flex-start;
		padding: 28rpx 0;
	}

	.item-textarea {
		flex: 1;
		width: 100%;
		font-size: 30rpx;
		color: #666;
		border: none;
		outline: none;
		background-color: transparent;
		min-height: 120rpx;
	}

	// 分隔线
	.divider {
		height: 1rpx;
		background-color: #F1F7ED;
	}

	// 提交按钮
	.submit-btn {
		width: calc(100% - 60rpx);
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		border-radius: 49rpx;
		margin: 40rpx 30rpx;
		border: none;
		background-color: #007356;

		&:active {
			background-color: #007356; // 点击态加深
		}

	}
</style>